<html>

<head>
    <title>导师评价</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <h1 class="mt-3 mb-5 text-center">导师评价信息</h1>
    <div class="container mt-3">

        <div class="row">
            <div class="col col-4">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="schoolcateSelector">选择学校类别</label>
                    </div>
                    <select class="custom-select" id="schoolcateSelector">
                        <option selected>选择学校类别</option>
                    </select>
                </div>
            </div>
            <div class="col col-4">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="universitySelector">选择学校</label>
                    </div>
                    <select class="custom-select" id="universitySelector">
                        <option selected>选择所在学校</option>
                    </select>
                </div>
            </div>
            <div class="col col-4">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="departmentSelector">选择院系</label>
                    </div>
                    <select class="custom-select" id="departmentSelector">
                        <option selected>选择所在院系</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col col-6">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="supervisorSelector">选择导师</label>
                    </div>
                    <select class="custom-select" id="supervisorSelector">
                        <option selected>选择姓名</option>
                    </select>
                </div>
            </div>

            <div class="col col-6 mb-3 text-center">
                <button type="button" class="btn btn-primary" style="width: 90%;" id="confirmBtn">确认</button>
            </div>
        </div>

        <div class="comments-info mb-3">
            <div class="row">
                <div class="col align-self-start" id="comments-num">
                    检索到0条评论
                </div>
                <div class="col align-self-end" style="text-align: right;">
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            排序方式
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenu">
                            <button class="dropdown-item" type="button" id="time-asc">时间顺序</button>
                            <button class="dropdown-item" type="button" id="time-des">时间倒序</button>
                            <button class="dropdown-item" type="button" id="count-des">字数倒序</button>
                            <button class="dropdown-item" type="button" id="rate-asc">评分顺序</button>
                            <button class="dropdown-item" type="button" id="rate-des">评分倒序</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="descriptions">
        </div>


        <script src="data.js"></script>
        <script>

            function getValuesInObjs(arr, key) {
                var resultArr = new Array();
                arr.forEach(function (obj) {
                    if (!resultArr.includes(obj[key])) {
                        resultArr.push(obj[key]);
                    }
                });
                return resultArr.sort(function (item1, item2) {
                    return item1.localeCompare(item2, 'zh');
                });
            }
            function filterValuesInArray(arr, key, value) {
                var resultArr = new Array();
                arr.forEach(function (obj) {
                    if (obj[key] == value) {
                        resultArr.push(obj);
                    }
                });
                return resultArr;
            }
            function setSelectOptions(selector, options) {
                selector.empty();
                options.forEach(function (value, i) {
                    var option = new Option(value, i);
                    selector.append($(option));
                    //option.selected = true;
                });
            }
            function showComments(sortFunc) {
                contentDiv.empty();
                currentCm.sort(sortFunc);
                currentCm.forEach(function (value, i) {
                    var desc = value['description'];
                    var rate = value['rate'];
                    var date = value['date'];
                    var card = $(`<div class="card mb-3">
                    <div class="card-header">
                    <div class="row">
                        <div class="col">
                            <h5>${currentUn}${currentDp}</h5>
                        </div>
                        <div class="col" style="text-align: right;">
                            <h5>${date}</h5>
                        </div>
                    </div>
                </div>
                    <div class="card-body">
                        <h3 class="card-title">${currentSp}</h3>
                        <p class="card-text">评分：${rate}</p>
                        <p class="card-text">${desc}</p>
                    </div></div >`);
                    contentDiv.append($(card));
                })
            }
            //Selectors
            var schoolcate = $('#schoolcateSelector');
            var university = $('#universitySelector');
            var department = $('#departmentSelector');
            var supervisor = $('#supervisorSelector');
            //Buttons and Divs
            var confirmBtn = $('#confirmBtn');
            var timeAscBtn = $('#time-asc');
            var timeDesBtn = $('#time-des');
            var countDesBtn = $('#count-des');
            var rateAscBtn = $('#rate-asc');
            var rateDesBtn = $('#rate-des');
            var contentDiv = $('.descriptions');
            var commentsNumDiv = $('#comments-num');
            //Initialize selection conditions
            var schoolcates = getValuesInObjs(data, 'school_cate')
            var universities = new Array();
            var departments = new Array();
            var supervisors = new Array();
            var currentCt = '';
            var currentUn = '';
            var currentDp = '';
            var currentSp = '';
            var commentsCnt = 0;
            var currentCm = new Array();
            //Selector change functions
            schoolcate.change(function () {
                currentCt = schoolcates[schoolcate.val()];
                var thisData = filterValuesInArray(data, 'school_cate', currentCt);
                universities = getValuesInObjs(thisData, 'university');
                setSelectOptions(university, universities);
                university.trigger('change');
            });
            university.change(function () {
                currentUn = universities[university.val()];
                var thisData = filterValuesInArray(data, 'university', currentUn);
                departments = getValuesInObjs(thisData, 'department');
                setSelectOptions(department, departments);
                department.trigger('change');
            });
            department.change(function () {
                currentDp = departments[department.val()];
                var thisData = filterValuesInArray(data, 'university', currentUn);
                thisData = filterValuesInArray(thisData, 'department', currentDp);
                supervisors = getValuesInObjs(thisData, 'supervisor');
                setSelectOptions(supervisor, supervisors);
                supervisor.trigger('change');
            })
            supervisor.change(function () {
                currentSp = supervisors[supervisor.val()];
            })
            //Button click functions
            confirmBtn.click(function () {
                var thisData = filterValuesInArray(data, 'university', currentUn);
                thisData = filterValuesInArray(thisData, 'department', currentDp);
                thisData = filterValuesInArray(thisData, 'supervisor', currentSp);
                currentCm = thisData;
                counts = thisData.length;
                commentsNumDiv.empty();
                commentsNumDiv.append(`检索到${counts}条评论`);
                showComments(function (a, b) { return Date.parse(a['date']) - Date.parse(b['date']); })
            });
            timeAscBtn.click(function () {
                showComments(function (a, b) { return Date.parse(a['date']) - Date.parse(b['date']); })
            })
            timeDesBtn.click(function () {
                showComments(function (a, b) { return Date.parse(b['date']) - Date.parse(a['date']); })
            })
            countDesBtn.click(function () {
                showComments(function (a, b) { return b['counts'] - a['counts']; })
            })
            rateAscBtn.click(function () {
                showComments(function (a, b) { return a['rate'] - b['rate']; })
            })
            rateDesBtn.click(function () {
                showComments(function (a, b) { return b['rate'] - a['rate']; })
            })
            setSelectOptions(schoolcate, schoolcates);
            schoolcate.trigger('change');


        </script>
</body>


</html>